import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Modal, Form } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
const manageMash = (props) => {
  const { visible = false, onClose, dispatch, loading, list, handleImage } = props;
  const { show, details = {} } = visible;
  const {} = details;
  const childRef = useRef();
  useEffect(() => {
    if (!show) {
      setSelectedRowKeys([]);
    }
  }, [show]);
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const onTab1Change = (key) => {
    setActiveTabKey1(key);
  };
  const tabList = [
    {
      key: 'tab1',
      tab: 'tab1',
    },
    {
      key: 'tab2',
      tab: 'tab2',
    },
  ];
  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    onChange: (val, selectedRows, info) => {
      setSelectedRowKeys(selectedRows);
    },

    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
  };
  const getColumns = [
    {
      title: '素材名称',
      dataIndex: 'materialName',
    },

    {
      title: '使用次数',
      dataIndex: 'useAmount',
    },
  ];
  const modalProps = {
    title: `选择素材`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    onOk: () => handleImage(selectedRowKeys),
  };

  return (
    <Modal {...modalProps} onCancel={onClose}>
      <TableDataBlock
        rowSelection={{
          type: 'radio',
          ...rowSelection,
        }}
        cardProps={{
          tabList: tabList,
          activeTabKey: activeTabKey1,
          tabPosition	: 'left',
          onTabChange: (key) => {
            onTab1Change(key);
          },
        }}
        cRef={childRef}
        loading={loading}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="redBooklet/fetchPublishMaterial"
        {...list}
      ></TableDataBlock>
    </Modal>
  );
};

export default connect(({ redBooklet, loading }) => ({
  list: redBooklet.publishMaterialList,
  loading: loading.models.user,
}))(manageMash);
